<!doctype html>

<html style="height:100%">
    <head>
        <title>Python正则提取</title>

        <style type="text/css">
            body,input,textarea {font-family:Microsoft YaHei; font-size:100%; border-radius:5px;}
            textarea {width:98%; height:100%; resize:none;}
            table {table-layout:fixed; }
        </style>
        <script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
        <script type="text/javascript">
            <!-- 校验为空 -->
            function check_null(value, alerttxt)
            {
                if (value != "")
                {
                    return true;
                }
                else
                {
                    alert(alerttxt);
                    return false;
                }
            }

            <!-- 提交正则 -->
            function submitRegGet(){
                var input_reg = $('#reg')
                var val_reg = input_reg.val()
                if (!check_null(val_reg, "reg null!"))
                {
                    input_reg.focus();
                    return;
                }

                var input_content = $('#content')
                var val_content = input_content.val()
                if (!check_null(val_content, "content null!"))
                {
                    input_content.focus();
                    return;
                }

                var input_ret_str = $('#ret_str')

                $.post('/reg_get', {
                    reg: val_reg,
                    content: val_content
                },
                function (data, status) {
                    if (status == 'success')
                    {
                        <!-- {'ret_count': ret_count,  -->
                        <!-- 'ret_str': ret_str} -->
                        ret_json = $.parseJSON(data);

                        $('#ret_count').html('提取结果(' + ret_json.ret_count + ')')
                        $('#ret_str').val(ret_json.ret_str)
                    }
                    else
                    {
                        $('#ret_count').html('提取结果(' + status + ')')
                    }

                })
            }

            <!-- 正则输入框，回车 -->
            function keyDown()
            {
                if(event.keyCode==13)
                {
                    submitRegGet();
                }
            }

            <!-- 拷贝 -->
            function onclickCopy()
            {
                var widget = $("#ret_str")
                widget.focus();
                widget.select();
                document.execCommand("Copy");
                alert("已复制至剪切板");
            }

            <!-- 重置 -->
            function onclickReset()
            {
                $("#reg").val("")
                $("#content").val("")
                $("#ret_str").val("")
            }
        </script>
    </head>

    <body style="margin:0; width:100%; height:100%">

        <!-- 标题 -->
        <div align=center style="width:100%; height:50px; background:#003399; ">
            <table style="width:80%; height:100%; ">
                <tr align=left>
                    <td style="width:50px;">
                        <img src="{{ url_for('static', filename='logo.jpg') }}" style="height:40px;">
                    </td>
                    <td>
                        <a href="" style="text-decoration:none; color:white; font-size:150%; ">Python正则提取</a>
                    </td>
                </tr>
            </table>
        </div>

        <!-- 正文 -->
        <div align=center style="width:100%; height:90%; ">
            <table border=0 style="width:80%; height:100%; text-align:center;">
                <tr style="height:50px">
                    <th colspan=2>
                        正则表达式 <input type=text id=reg size=50 onkeydown="keyDown()" >
                        &nbsp;<input type=submit value=提交 onclick="submitRegGet()">
                    </th>
                </tr>

                <tr style="height:20px; background-color:#CC0033; color: white">
                    <th>
                        原始文本
                    </th>
                    <th>
                        <div id=ret_count>提取结果</div>
                    </th>
                </tr>

                <tr>
                    <td>
                        <textarea id=content></textarea>
                    </td>
                    <td>
                        <textarea id=ret_str style="background-color:#EBEBE4"></textarea>
                    </td>
                </tr>

                <!-- 尾巴 -->
                <tr style="height:20px;">
                    <td>
                        <input type=button value=重置 onclick="onclickReset()"/>
                    </td>
                    <td>
                        <input type=button value=拷贝 onclick="onclickCopy()"/>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>